<template>
    <!-- 人员弹窗 -->
    <a-modal
        :footer="false"
        centered
        :title="headerTitle"
        :visible.sync="dialogVisible"
        @cancel="handleCancel"
        width="1200px"
    >
        <a-row :gutter="10">
            <!-- 侧边栏 -->
            <a-col :span="6" style="border-right: 1px solid #d9d9d9; overflow-y: scroll; height: 600px">
                <!-- 公司组织树搜索 -->
                <!-- <tree-organization
          ref="treeOrganization"
          @loader="search"
          :autoSelect="false"
          :selectedKeys.sync="selectedKeys"
          :selectOptions.sync="selectOptions"
        /> -->
                <div>
                    <a-radio-group style="width: 100%" default-value class="col-center" button-style="solid">
                        <a-radio-button
                            :value="index"
                            v-for="(item, index) in leftList"
                            :key="index"
                            style="width: 100%; text-align: center; margin-bottom: 20px"
                            @click="getRightList(item)"
                            >{{ item.name }}</a-radio-button
                        >
                    </a-radio-group>
                </div>
            </a-col>

            <!-- 主内容 -->
            <a-col :span="18">
                <!-- <a-input-search
                    v-model="key"
                    placeholder="请输入员工名称/电话号码/员工编号"
                    class="mb12"
                    :maxLength="30"
                    @search="search"
                ></a-input-search> -->
                <!-- 表格 -->
                <s-table
                    ref="table"
                    :scroll="{ y: 300 }"
                    tableLayout="fixed"
                    size="default"
                    :rowKey="(row) => row.id || row.employeeId"
                    :columns="columns"
                    :data="loadData"
                    :alert="true"
                    show-size-changer
                    show-quick-jumper
                    showPagination="auto"
                >
                    <!-- 表格操作栏 -->
                    <span slot="actions" slot-scope="text, record">
                        <template>
                            <a @click="handleSubmit(record)">添加</a>
                        </template>
                    </span>
                </s-table>
            </a-col>
        </a-row>
    </a-modal>
</template>

<script>
import { STable } from '@/components' // 表格
import TreeOrganization from '@/components/businessComponents/TreeOrganization' // 树
import { getOrgsTree } from '@/api/subassembly/TreeSelectOrganization' // api
import cloneDeep from 'lodash.clonedeep' // 深拷贝
import { getOrganization } from '@/api/safetySupervision/securityPersonnel'
import Vue from 'vue'
import { getOneOrgUsers } from '@/api/commons'
export default {
    name:'a'+Date.now(),    components: {
        STable,
        TreeOrganization,
    },
    props: {
        // 显隐控件
        visible: {
            type: Boolean,
            default() {
                return false
            },
        },
        // 表单
        form: {
            type: Object,
            default() {
                return {}
            },
        },
        // 标题
        headerTitle: {
            type: String,
            default() {
                return '添加安全库人员'
            },
        },
        // 列表api
        api: {
            type: Object,
            default() {
                return {}
            },
        },
        // 列表api请求axios
        loadList: {
            type: String,
            default() {
                return 'getList'
            },
        },
    },
    computed: {
        // 树节点api
        apiTree() {
            return { getOrgsTree }
        },
        // 与父组件绑定visible
        dialogVisible: {
            get: function () {
                return this.visible
            },
            set: function (e) {
                this.$emit('update:visible', e)
            },
        },
        // 表格列表请求参数
        args() {
            let args = {}
            // 添加树节点id
            if (this.selectedKeys.length > 0) {
                args.subItemId = this.selectedKeys[0]
            }
            // 若表单不为空
            if (Object.keys(this.form)?.length) {
                Object.assign(args, this.form)
            }
            // 若关键词存在
            this.key && (args.key = this.key)
            return args
        },
    },
    data() {
        return {
            queryParam: {},
            key: '',
            selectedKeys: {},
            userInfo: {},
            leftList: [],
            subItemId: '',
            personnelType: '',
            loadData: (parameter) => {
                // 若未选中则不渲染
                // if (!this.args.subItemId) {
                //   return false
                // }
                if (this.queryParam.orgId) {
                    const requestParameters = Object.assign({}, parameter, this.queryParam)
                    return getOneOrgUsers(requestParameters).then((res) => {
                        if (res.code == 200) {
                            let obj = {}
                            obj.currentPage = requestParameters.pageNo
                            obj.pageSize = requestParameters.pageSize
                            obj.totalPage = Math.ceil(res.data.total / requestParameters.pageSize)
                            obj.totalSize = res.data.total
                            obj.data = res.data.list
                            return obj
                        }
                    })
                }
            },
            columns: [
                {
                    title: '员工名称',
                    dataIndex: 'name',
                },
                {
                    title: '员工编码',
                    dataIndex: 'jobNum',
                },
                {
                    title: '电话号码',
                    dataIndex: 'phone',
                },
                {
                    title: '职称',
                    dataIndex: 'title',
                },
                {
                    title: '操作',
                    dataIndex: 'actions',
                    width: '100px',
                    scopedSlots: { customRender: 'actions' },
                },
            ],
            selectOptions: {},
        }
    },
    mounted() {
        this.userInfo = Vue.getAcloudProvider().getUserInfo()
    },
    methods: {
        // 头部搜索
        search() {
            this.$refs.table.refresh(true)
        },
        handleSubmit(record) {
            let that = this
            record.orgId = this.queryParam.orgId
            const data = { ...record, personnelType: this.personnelType }
            console.log(data)
            that.$emit('confirm', data)
        },
        handleCancel() {
            this.dialogVisible = false
        },
        getRightList(data) {
            this.personnelType = data.name
            this.queryParam.orgId = data.id
            this.search()
        },
        async getLeftList() {
            let params = {
                code: this.userInfo.currentPost.code,
                id: this.userInfo.currentPost.id,
            }
            const [err, res] = await getOrganization(params)
            if (!err) {
                this.leftList = res.data || []
                console.log(this.leftList)
            }
        },
    },
    watch: {
        visible(e) {
            if (e) {
                !this.$refs.treeOrganization &&
                    this.$nextTick(() => {
                        this.getLeftList()
                    })
            } else {
                // 初始化表单
                this.keyword = ''
            }
        },
    },
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';

.col-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}
</style>
